import CityList from "../tourCommpents/CityList";
export default {
  name: "City",
  data() {
    return {
      cityCode: "",
      city: "",
      cityName: "",
      keyword: "",
      search: "", // 搜索关键字
      searchFlag: false,
      cities: [], // 城市配置信息
      cityData: [], // 储存城市配置信息
      cityArr: [], //处理好数据结构
      historyList: [], //搜索站点的历史记录
      hostCities: [], // 热门城市
      timer: null
    };
  },
  methods: {
    // 搜索
    searchCity() {
      if (this.search !== "") {
        this.city = this.search;
        this.keyword = this.search;
        this.cityCode = "";
        if (this.timer) clearTimeout(this.timer); //防抖
        this.timer = setTimeout(() => {
          this.searchFlag = true;
          this.stopMove();
          this.aroundLocation();
        }, 100);
      } else {
        this.searchFlag = false;
        this.Move();
      }
    },
    formattingData(arr, group_key) {
      let map = {};
      let res = [];

      for (let i = 0; i < arr.length; i++) {
        let ai = arr[i];
        if (!map[ai[group_key]]) {
          map[ai[group_key]] = [ai];
        } else {
          map[ai[group_key]].push(ai);
        }
      }
      Object.keys(map).forEach((key, index) => {
        res.push({
          index: index,
          [group_key]: key,
          list: map[key]
        });
      });
      return res;
    },
    aroundLocation() {
      $http.get("plugin.travel-around.frontend.index.index.getTravelAroundLocation", { cityCode: this.cityCode, city: this.city, keyword: this.keyword }, "加载中..").then(response => {
        if (response.result == 1) {
          let res = response.data;
          this.cityData = res.all;
          this.matching = res.matching || [];
          if (!res.matching) {
            this.searchFlag = false;
            this.Move();
          }
          let cityCode = localStorage.getItem("cityCode") || "";
          if (cityCode) {
            this.cityArr = JSON.parse(localStorage.getItem("cityCodeArr")) || [];
          } else {
            this.cityArr = this.formattingData(res.all, "firstWord");
            localStorage.setItem("cityCodeArr", JSON.stringify(this.cityArr));
            localStorage.setItem("cityCode", "firstWord");
          }
        } else {
          this.$dialog.alert({
            message: response.msg
          });
        }
      });
    },
    searchSites(city, cityCode) {
      this.$router.replace(this.fun.getUrl("travelIndex", {}, { city: city, cityCode: cityCode,localCity: city}));
      this.historyCity(city, cityCode);
    },
    historyCity(city, cityCode) {
      let arr = localStorage.getItem("historyList") || [];
      let searchArr = [];
      if (arr.length > 0) {
        arr = JSON.parse(arr);
        let len = arr.length;
        if (len >= 10) {
          arr.pop();
        }
      }
      arr.unshift({ name: city, cityCode: cityCode });
      searchArr = arr.filter((currentValue, currentIndex, selfArr) => {
        //去重
        return selfArr.findIndex(x => x.name === currentValue.name) === currentIndex;
      });
      localStorage.setItem("historyList", JSON.stringify(searchArr));
    },
    //在这里插入代码片停止页面滚动
    stopMove() {
      document.body.style.overflow = "hidden";
    },
    //开启页面滚动
    Move() {
      document.body.style.overflow = ""; //出现滚动条
    }
  },
  mounted() {
    // 获取城市配置文件的数据
  },
  beforeDestroy() {
    this.Move();
  },
  destroyed() {
    this.Move();
  },
  activated() {
    if ((this.$route.query.cityCode ?? "") !== "") {
      this.cityCode = Number(this.$route.query.cityCode);
      this.city = this.$route.query.city;
      this.cityName = this.$route.query.city;
    }
    try {
      let History = localStorage.getItem("historyList") || [];
      if (History.length > 0) {
        this.hostCities = JSON.parse(History);
      }
    } catch (error) {
      console.log(error);
    }
    this.searchFlag = false;
    this.aroundLocation();
  },
  components: {CityList}
};
